<template>
  <div class="wrapper">
    <el-popover placement="right"
      width="350"
      trigger="click">
      <h4 class="title">订单信息</h4>
      <p>
        <span>订单编号：</span>{{orderInfo.payNum}}</p>
      <p>
        <span>付款金额：</span>
        <span class="price" v-if="orderInfo.money">￥{{orderInfo.money}}</span>
      </p>
      <p>
        <span>下单时间：</span>{{orderInfo.orderTime}}</p>
      <p>
        <span>购买人：</span>{{orderInfo.userName}}</p>
      <p>
        <span> 联系电话：</span>{{orderInfo.phone}}</p>
      <p>
        <span>推荐人：</span>{{orderInfo.operatorName}}</p>
      <h4 class="title">购券明细</h4>
      <p>
        <span>归属团购券活动：</span>{{orderInfo.title}}</p>
      <div class="clearfix" style="padding-left:30px">
        <span class="fl">商品列表：</span>
        <div class="fl">
          <div v-for="(item,index) in orderInfo.commoditys" :key="index">{{item.name}} x{{item.num}}</div>
        </div>
      </div>
      <el-button type="text"
        slot="reference" @click="orderDetail">订单详情</el-button>
    </el-popover>

  </div>
</template>

<script>
import {Orderinfo} from '@/public/js/saleRoom.js'
export default {
  components: {},
  props: ['id'],
  data() {
    return {
      orderInfo:{}
    };
  },
  watch: {

  },
  computed: {},
  methods: {
    orderDetail(){
      console.log(this.id)
      Orderinfo({
        id:this.id
      }).then(res=>{
        console.log(res)
        this.orderInfo = res.data.orderInfo;
      })
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.title {
  color: #6d2377;
}
.price{
  color:red;
}
p{
  line-height: 26px;
  padding-left:30px
}
</style>